<!--
 * @Author: June
 * @Date: 2022-05-30 10:36:13
 * @LastEditors: June
 * @LastEditTime: 2023-10-23 11:26:37
 * @Description: 分页组件
 *
-->
<template>
  <el-pagination ref="pagination" :background="background" :current-page.sync="currentPage" :page-sizes="[5, 10, 15, 20, 50, 100]" :page-size.sync="pageSize" :layout="layout" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script>
export default {
  props: {
    total: {
      type: Number,
      default: 10
    },
    current: {
      type: Number,
      default: 1
    },
    size: {
      type: Number,
      default: 15
    },
    layout: {
      type: String,
      default: 'sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isFixed: true
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.current
      },
      set(val) {
        this.$emit('update:current', val)
      }
    },
    pageSize: {
      get() {
        return this.size
      },
      set(val) {
        this.$emit('update:size', val)
      }
    }
  },
  methods: {
    /**
     * @param {*} val 条数
     */
    handleSizeChange(val) {
      this.$emit('pagination', this.currentPage)
    },
    /**
     * @param {*} val 分页数
     */
    handleCurrentChange(val) {
      this.$emit('pagination', this.currentPage)
    }
  }
}
</script>
<style lang='scss' scoped>
.el-pagination {
  margin-top: 10px;
  padding-top: 5px;
  text-align: right;
  // background-color: #f5f7fa;
  height: 40px;
  border-radius: 5px;
}
</style>
